<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">地址列表</p>
    </van-nav-bar>
    <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认地址"
        @add="onAdd"
        @edit="onEdit"
        @select="onChoice"
    />
    <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        :description="desc"
        close-on-click-action
        @select="options"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, ActionSheet, AddressList, Dialog } from 'vant'
import { requestGetAddress, requestRemoveAddress } from '../../api/address'

Vue.use(NavBar)
Vue.use(ActionSheet)
Vue.use(AddressList)
Vue.use(Dialog)

export default {
  name: 'AddressList',
  data () {
    return {
      chosenAddressId: '',
      list: [],
      desc: '',
      actions: [
        { name: '修改地址' },
        { name: '删除地址', color: '#ee0a24' },
      ],
      addressIndex: 0,
      show: false
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      requestGetAddress().then(res => {
        this.addressList(res.data)
      })
    },
    // 处理后台返回的数据
    addressList (data) {
      this.list = data.map(item => {
        item.id = item.addressid
        item.address = item.province + item.city + item.county + item.addressDetail
        return item
      }).sort((a, b) => {
        return b.isDefault - a.isDefault
      })
      this.chosenAddressId = this.list[0] && this.list[0].id
    },
    // ActionSheet的操作选项
    options (actions, op) {
      switch (op) {
        case 0:
          // console.log(actions.name)
          localStorage.setItem('edit', JSON.stringify(this.list[this.addressIndex]))
          this.$router.push('/address/edit')
          break
        case 1:
          console.log()
          // console.log(actions.name)
          requestRemoveAddress({
            addressid: this.list[this.addressIndex].addressid
          }).then(() => {
            this.loadData()
          })
      }
    },
    onAdd () {
      // console.log('新增地址');
      this.$router.push('/address/add')
    },
    onEdit (item, index) {
      // console.log('编辑地址:' + index);
      this.show = !this.show
      this.desc = this.list[index].address
      this.addressIndex = index
    },
    onChoice (item) {
      localStorage.setItem('address', JSON.stringify(item))
      const { mode } = this.$route.query
      if (mode === 'multi') {
        this.$router.push('/confirm/multi')
        // Dialog.confirm({
        //   title: '确认下单',
        //   message: '您确定要购物车下单嘛',
        // }).then(() => {
        //   requestShopCartOrder(item.addressid).then(res => {
        //     setTimeout(() => {
        //       this.$toast({
        //         duration: 3000,
        //         message: res.msg
        //       })
        //     }, 1000)
        //     this.$router.back()
        //   })
        // }).catch(() => {
        //   // on cancel
        // })
      } else if (mode === 'single') {
        console.log('单品下单')
        this.$router.push('/confirm/single')
        // const params = JSON.parse(localStorage.getItem('orderSingle'))
        // params.addressid = item.addressid
        // Dialog.confirm({
        //   title: '确认下单',
        //   message: '您确定要下单嘛',
        // }).then(() => {
        //   requestOrder(params).then((res) => {
        //     setTimeout(() => {
        //       this.$toast({
        //         duration: 3000,
        //         message: res.msg
        //       })
        //     }, 1000)
        //     this.$router.back()
        //   })
        // })
      }else{
        console.log('管理地址')
      }
    },
    back () {
      this.$router.back()
    }
  },
}
</script>

<style scoped>
.container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
}
</style>
